<template>
  <div class="page marketing">
    <div style="font-size: 20px" class="pb-24">营销配置</div>
    <div class="justify-center form-container">
      <el-form
        style="width: 900px"
        :model="formData"
        label-width="180px"
        inline
        ref="form"
        size="small">
        <el-row>
          <el-form-item label="分销提成" prop="distribution_fee">
            <el-input-number v-model="formData.distribution_fee" :controls="false" :min="0"></el-input-number> <span class="pl-12">%</span>
          </el-form-item>
          <el-form-item label="拼团最大时长" prop="groupon_hour">
            <el-input-number v-model="formData.groupon_hour" :controls="false" :min="0"></el-input-number> <span class="pl-12">小时</span>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="每日登陆获得里由卡" prop="score_login_one_day">
            <el-input-number v-model="formData.score_login_one_day" :controls="false" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="连续5天登陆获得里由卡" prop="score_login_five_day">
            <el-input-number v-model="formData.score_login_five_day" :controls="false" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="上课过关获得里由卡" prop="score_pass_course">
            <el-input-number v-model="formData.score_pass_course" :controls="false" :min="0"></el-input-number>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="启动页" prop="start_page">
            <uploader :src.sync="formData.start_page"></uploader>
          </el-form-item>
          <el-form-item label="里由美术馆海报" prop="leoyoo_poster">
            <uploader :src.sync="formData.leoyoo_poster"></uploader>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="上传作品获得奖学金" prop="scholarship_upload_works">
            <el-input-number v-model="formData.scholarship_upload_works" :controls="false" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="奖学金最大抵扣金额" prop="scholarship_use_per_order">
            <el-input-number v-model="formData.scholarship_use_per_order" :controls="false" :min="0"></el-input-number> <span class="pl-12">%</span>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="每日登陆获得经验值" prop="experience_login_one_day">
            <el-input-number v-model="formData.experience_login_one_day" :controls="false" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="连续5天登陆获得经验值" prop="experience_login_five_day">
            <el-input-number v-model="formData.experience_login_five_day" :controls="false" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="上课过关获得经验值" prop="experience_pass_course">
            <el-input-number v-model="formData.experience_pass_course" :controls="false" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="年卡价格" prop="vip_price">
            <el-input-number v-model="formData.vip_price" :controls="false" :precision="2" :min="0"></el-input-number>
          </el-form-item>
        </el-row>
        <el-form-item label="经验等级获取规则" prop="experience_introduction">
          <rich-text v-model="formData.experience_introduction"></rich-text>
        </el-form-item>
        <el-form-item label="里由卡获取规则" prop="score_introduction">
          <rich-text v-model="formData.score_introduction"></rich-text>
        </el-form-item>
        <el-form-item label="奖学金获取规则" prop="scholarship_introduction">
          <rich-text v-model="formData.scholarship_introduction"></rich-text>
        </el-form-item>
        <el-form-item label="提现规则" prop="withdraw_introduction">
          <rich-text v-model="formData.withdraw_introduction"></rich-text>
        </el-form-item>
        <el-form-item label="年卡使用和购买规则" prop="vip_introduction">
          <rich-text v-model="formData.vip_introduction"></rich-text>
        </el-form-item>
        <el-form-item label="里由美术馆介绍" prop="leoyoo_introduction">
          <rich-text v-model="formData.leoyoo_introduction"></rich-text>
        </el-form-item>
        <div class="flex-center">
          <el-button type="primary" @click="save" style="width: 200px">保存</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getSystemConfigList, saveSystemConfig } from '@/api/base-config';

export default {
  data() {
    return {
      formData: {
        distribution_fee: undefined,
        groupon_hour: undefined,
        score_login_one_day: undefined,
        score_login_five_day: undefined,
        score_pass_course: undefined,
        scholarship_upload_works: undefined,
        scholarship_use_per_order: undefined,
        experience_login_one_day: undefined,
        experience_login_five_day: undefined,
        experience_pass_course: undefined,
        vip_price: undefined,
        experience_introduction: '',
        score_introduction: '',
        scholarship_introduction: '',
        withdraw_introduction: '',
        vip_introduction: '',
        leoyoo_introduction: '',
        start_page: '',
        leoyoo_poster: '',
      },
      options: [],
    };
  },
  methods: {
    async getSystemConfigList() {
      const result = await getSystemConfigList({
        pageNum: 0,
        pageSize: 50,
      });
      const { list } = result;
      list && list.forEach((item) => {
        if (item.keyName === 'vip_price') {
          this.formData[item.keyName] = item.val ? item.val / 100 : undefined;
        } else {
          this.formData[item.keyName] = item.val;
        }
      });
    },
    async save() {
      const dataList = [];
      Object.keys(this.formData).forEach((key) => {
        if (key === 'vip_price') {
          dataList.push({
            keyName: key,
            val: this.formData[key] * 100,
          });
        } else {
          dataList.push({
            keyName: key,
            val: this.formData[key],
          });
        }
      });
      console.log('dataList', dataList);
      try {
        await saveSystemConfig({
          dataList: dataList,
        });
        this.$message.success('保存成功');
      } catch (err) {
        this.$message.error('保存失败');
      }
    },
  },
  async created() {
    await this.getSystemConfigList();
  },
};
</script>
<style lang="scss" scoped>
  .marketing {
    .form-container {
      height: calc(100vh - 190px);
      overflow-y: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      .video-section {
        border: 1px solid #CCC;
      }
    }

  }
</style>
